<template>
	<view class="container">
		<view class="user-section">
			<image :src="imgs.topbg" class="bg" @error="onImageError('topbg')" />
			<view class="user-info-box" @click="navToLogin">
				<view class="portrait-box">
					<!-- <image class="portrait" :src="userInfo.portrait || '/static/missing-face.png'"></image> -->
					<image class="portrait" :src="logo"></image>
				</view>
				<view class="info-box">
					<text class="username">{{ userData.unitName || '游客' }}</text>
					<text class="level">等级：{{userData.level}}</text>
				</view>
			</view>
		</view>
		<view class="detail">
			<h5>基本属性</h5>
			<ul>
				<li>经验: {{userData.exp}} / {{userData.nextExp}}</li>
				<li>生命: {{userData.hp}} / {{userData.maxHp}}</li>
				<li>魔法: {{userData.mp}} / {{userData.maxMp}}</li>
				<li>攻击力: {{userData.minAttack}} - {{userData.maxAttack}}</li>
				<li>防御: {{userData.defence}}</li>
				<li>速度: {{userData.speed}}</li>
				<li>仇恨值: {{userData.threat}}</li>
			</ul>
		</view>
		
		<view class="buttons rechargeStyle" @click="toLogout">
			<image :src="imgs.buttonRecharge" class="buttonsrow" mode="widthFix"
				@error="onImageError('buttonBill')" />
			<view class="line">
				<text>退出</text>
				<text class="smallLine">LOGOUT</text>
			</view>
		</view>

	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		getParamsRequestPost
	} from '../../utils/getApi.js'
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			// listCell
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userInfo: {},
				balance: 0,
				small: '00',
				logo: this.$imgsrc + 'eat.png',
				imgs: {
					topbg: this.$imgsrc + 'topbg.png',
					balance: this.$imgsrc + 'balance.png',
					userButton: this.$imgsrc + 'userButton.png',
					buttonBill: this.$imgsrc + 'buttonRecharge.png',
					buttonRecharge: this.$imgsrc + 'buttonBill.png',
				},
				userData: {}
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			...mapMutations(['logout']),
			onImageError(name) {
				this.imgs[name] = this.$imgsrc + 'errorImage.jpg'
			},
			/**
			 * 统一跳转接口,拦截未登陆路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if (!this.hasLogin) {
					url = '/pages/public/loading';
				}
				uni.navigateTo({
					url
				})
			},
			//退出登陆
			toLogout() {
				const that = this;
				uni.showModal({
					content: '确定要退出登陆么',
					success: (e) => {
						if (e.confirm) {
							uni.setStorage({
								key: 'accessToken',
								data: ''
							})
							setTimeout(() => {
								// uni.navigateBack();
								that.userInfo = {}
								uni.navigateTo({
									url: '/pages/public/login'
								})
								that.$api.msg(`已退出`);
							}, 200)
						}
					}
				});
			},
			navToLogin() {
				if (!this.userInfo.nickName) {
					uni.navigateTo({
						url: '/pages/public/loading'
					})
				} else {
					this.toLogout();
				}
			},
			getUserInfo() {
				const that = this;
				// 获取数据
				uni.getStorage({
					key: 'accessToken',
					success: function(res) {
						getParamsRequestPost("/unit/entity/mainUnit", {
								session: {
									sid: res.data
								},
							}, true)
							.then(result => {
								that.userData = result.data;
							})
							.catch(result => {
								console.log(result);
							})
					},
					fail: function(error) {
						console.log('获取数据失败：', error);
					}
				});
			},
		}
	}
</script>
<style lang='scss'>
	.container {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		margin: 0 auto;
		display: block;
		background: #F7F6F6;
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.user-section {
		height: 270upx;
		padding: 100upx 30upx 0;
		position: relative;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.user-info-box {
		height: 180upx;
		padding-top: 32upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.info-box {
			width: 100%;
			overflow: hidden;
			margin: 0 auto;
			display: block;
		}

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.username {
			width: 100%;
			overflow: hidden;
			margin: 0 auto;
			display: block;
			font-size: $font-lg + 6upx;
			color: $font-color-dark;
			margin-left: 20upx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			line-height: 32rpx;
			margin-bottom: 19upx;
		}

		.level {
			width: 115rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
			margin-left: 20upx;
		}
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.detail {
		width: 80%;
		margin: 0 auto;
		display: block;

		h5 {
			font-size: 36rpx;
			margin-bottom: 20rpx;
		}

		ul,
		li {
			margin: 0;
			list-style: none;
			padding: 0;
		}

		li {
			width: 50%;
			float: left;
			margin-bottom: 8rpx;
		}
	}
	.buttons {
		width: 90%;
		overflow: hidden;
		height: 156upx;
		margin: 0 auto;
		display: block;
	
		.buttonsrow {
			width: 100%;
	
			overflow: hidden;
			margin: 0 auto;
			display: block;
		}
	
		.line {
			position: relative;
			bottom: 94upx;
			padding-left: 65upx;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #44C47A;
		}
	
		.smallLine {
			width: 155rpx;
			height: 19rpx;
			font-size: 20rpx;
			font-family: Arial;
			font-weight: 400;
			color: #D0EED2;
			padding-left: 25upx;
		}
	}
	
	.rechargeStyle text {
		color: #6A94C7 !important;
	
		.smallLine {
			color: #C3DDF1;
		}
	}
</style>